<template>
  <div class="app-container">
    <el-alert type="info" :closable="false" class="margin-bottom">您当前可用余额：￥{{ $store.state.user.info.availMoney }}，冻结金额：￥{{
      $store.state.user.info.freezeMoney }}，
      提现手续费：{{ payrate }}，单笔手续费：{{ $store.state.user.info.onerate }},提现时间为：{{ $store.state.app.config.txpaytimestart }} - {{ $store.state.app.config.txpaytimeend
      }} <a :href="$store.state.app.config.url + '/resource/demo.xlsx'" style="color: red">【提现模板点我下载】</a>
    </el-alert>
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-alert v-if="tableData.length > 0" type="success" :closable="false" class="margin-top">
      总金额：￥{{ totalAmount.toFixed(2) }}&nbsp;&nbsp;&nbsp;总行数：{{ totalRows.toFixed(2) }}&nbsp;&nbsp;&nbsp;单笔手续费汇总：{{ totalDanbi.toFixed(2) }}&nbsp;&nbsp;&nbsp;总提现费：{{ totalRate.toFixed(2) }}
    </el-alert>
    <el-table v-if="tableData.length>0" :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
    <el-form ref="form" :rules="rules" :model="form" label-position="top" label-width="120px" class="padding-big-top">

      <el-form-item label="支付密码：" prop="payPassword">
        <el-input v-model="form.payPassword" placeholder="请输入支付密码" show-password />
      </el-form-item>
      <!-- 输入短信验证码或者google验证码 -->
      <el-form-item label="验证码" prop="codeStyle">
        <el-radio v-model="form.codeStyle" label="1">谷歌验证器验证</el-radio>
        <!-- <el-radio v-model="form.codeStyle" label="2">短信验证</el-radio> -->
      </el-form-item>
      <el-form-item v-if="form.codeStyle == '1'" prop="googleCode">
        <el-input v-model="form.googleCode" placeholder="请输入谷歌验证器app上的验证码" />
        <el-row>
          <el-col><router-link to="/user/bindgoogle" style="color: #F56C6C">如果您还没有绑定谷歌验证器，请点我绑定！</router-link></el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 100%" @click.native.prevent="submit">立即提现</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { validatePwd } from '@/utils/validate'
import { batchApplyRepay } from '@/api/repay'
import { sendSms } from '@/api/sms'

export default {
  name: 'BatchApplyRepay',
  components: { UploadExcelComponent },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!validatePwd(value)) {
        callback(new Error('请填写6-16位字符，不能包含空格'))
      } else {
        callback()
      }
    }
    return {
      tableData: [],
      tableHeader: [],
      totalAmount: 0, // 新增字段，用于存储总金额
      totalRows: 0, // 新增字段，用于存储总行数
      totalDanbi: 0,
      totalRate: 0,
      form: {
        payPassword: '',
        codeStyle: '1',
        smsCode: '',
        googleCode: ''
      },
      rules: {
        payPassword: [{ required: true, trigger: 'blur', validator: validatePassword }],
        codeStyle: [{ required: true, tigger: 'blur', message: '请选择验证码类型' }]
      },
      send_show: true,
      time_wait: 60,
      timer: null
    }
  },
  computed: {
    payrate() {
      const payRateType = this.$store.state.user.info.payrate_type === '0' ? '元' : '%'
      const payRate = this.$store.state.user.info.payrate
      return payRate + payRateType
    }
  },
  mounted() {
    // 刷新用户余额
    this.$store.dispatch('user/getInfo')
  },
  methods: {
    submit() {
      this.form.list = this.tableData
      batchApplyRepay(this.form).then(resp => {
        this.$message.success(resp.data.msg)
        this.$router.push('/repay/index')
      })
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '请不要上传超过1M的文件',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
      // 获取总行数
      this.totalRows = results.length
      console.log('总行数:', this.totalRows)
      this.totalDanbi = this.totalRows * this.$store.state.user.info.onerate
      // 计算总金额
      if (results.length > 0) {
        // 尝试匹配可能的列名
        const amountKey = header.find(key => key.includes('金额'))

        if (amountKey) {
          // 检查数据格式
          const isObjectArray = results.length > 0 && typeof results[0] === 'object' && !Array.isArray(results[0])

          this.totalAmount = results.reduce((sum, row) => {
            try {
              // 根据数据格式获取金额值
              const amountValue = isObjectArray ? row[amountKey] : row[header.indexOf(amountKey)]
              // 移除非数字字符并解析为数字
              const valueStr = String(amountValue || '0').replace(/[^0-9.-]/g, '')
              const value = parseFloat(valueStr)
              return sum + (isNaN(value) ? 0 : value)
            } catch (e) {
              console.error('解析金额失败:', e)
              return sum + 0
            }
          }, 0)
          this.totalRate = this.totalAmount * this.$store.state.user.info.payrate / 100
        } else {
          this.totalAmount = 0
        }
      } else {
        this.totalAmount = 0
      }
    },
    btn_wait() {
      this.$message.success('短信验证码发送成功')
      this.timer = setInterval(() => {
        if (this.time_wait <= 0) {
          this.send_show = true
          this.time_wait = 60
          clearInterval(this.timer)
        } else {
          this.send_show = false
          this.time_wait--
        }
      }, 1000)
    },
    sms_send() {
      sendSms('18888888888', 'batchrepay').then(resp => {
        this.btn_wait()
      })
    }
  }
}
</script>

